<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

    <script>
        function jqueryAjax() {
            // 1. 通用性写法
            // $.ajax(url, settings)
            // settings如下：
            // async：是否异步执行AJAX请求，默认为true，千万不要指定为false；
            // method：发送的Method，缺省为'GET'，可指定为'POST'、'PUT'等；
            // contentType：发送POST请求的格式，默认值为'application/x-www-form-urlencoded; charset=UTF-8'，也可以指定为text / plain、application / json；
            // data：发送的数据，可以是字符串、数组或object。如果是GET请求，data将被转换成query附加到URL上，如果是POST请求，根据contentType把data序列化成合适的格式；
            // headers：发送的额外的HTTP头，必须是一个object；
            // dataType：接收的数据格式，可以指定为'html'、'xml'、'json'、'text'等，缺省情况下根据响应的Content - Type猜测

            // 当然url也可以放setting里面
            // $.ajax({
            //     type: "get",
            //     url: "https://so.csdn.net/api/v2/search?q=王力宏&t=userinfo",
            //     dataType: "json",
            //     success: function (data) {
            //         console.log(data);
            //         document.getElementById("myDiv").innerHTML = JSON.stringify(data);
            //     }
            // });


            // 2. 指定调用方法类型 $.post
            $.get(
                "https://so.csdn.net/api/v2/search?q=王力宏&t=userinfo",
                function (data) {
                    console.log(data);
                    document.getElementById("myDiv").innerHTML = JSON.stringify(data);
                }
            );

            // 3. json太常用了，所有还有getJSON, 但是没有postJSON
            // $.getJSON(
            //     "https://so.csdn.net/api/v2/search?q=王力宏&t=userinfo",
            //     function (data) {
            //         console.log(data);
            //         document.getElementById("myDiv").innerHTML = JSON.stringify(data);
            //     }
            // );

        }
    </script>
</head>

<body>

    <h2>五花八门</h2>
    <pre>
		1. 通用做法 $.ajax()
        2. 指定方法类型：$.post() && $.get()
        3. 指定格式类型 $.getJSON(url, data, func);
	</pre>
    <button type="button" onclick="jqueryAjax()">加载内容</button>
    <div id="myDiv">数据返回区域</div>

</body>

</html>